<template>
  <vue-ueditor-wrap :config="myConfig" v-model="copyContent" :editor-id="editorId"></vue-ueditor-wrap>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  name: "Editor",
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      editorId: `editor-${new Date().getTime()}`, //唯一id,防止editor缓存
      copyContent: ""
    };
  },
  props: {
    // 富文本高度
    initialFrameHeight: {
      type: Number,
      default() {
        return 200;
      }
    },
    // 富文本内容
    content: {
      type: String,
      default: ""
    }
  },
  computed: {
    myConfig() {
      return {
        zIndex: 4000,
        autoHeightEnabled: true, // 自动变高
        autoFloatEnabled: true,
        initialContent: "请输入内容",
        autoClearinitialContent: true,
        initialFrameWidth: "90%", // 初始化宽
        initialFrameHeight: this.initialFrameHeight, // 初始化高
        BaseUrl: "",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口） - 修改成自己后端地址
        serverUrl: "/api/upload/ueditorUpload",
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "/UEditor/"
      };
    }
  },
  watch: {
    copyContent(val) {
      this.$emit("ueChange", val);
    },
    content: {
      handler(val) {
        console.log(val);
        this.copyContent = val;
      }
    }
  }
};
</script>